<template>
	<el-container>
		<el-aside width="200px">
			<el-menu default-active="1" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff"
				active-text-color="#ffd04b">
				<div id="logo">
					<img src="@/assets/images/logo.png" alt="">
					<span>鹊桥相亲角</span>
				</div>
				<el-menu-item index="1">
					<i class="el-icon-menu"></i>
					<span slot="title">
						<router-link to="/index">首页</router-link>
						</span>
				</el-menu-item>
				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>用户管理</span>
					</template>
					<el-menu-item index="2-1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/user">用户信息</router-link>
							</span>
						</template>
					</el-menu-item>
					<el-menu-item index="2-2">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/publish">发布信息</router-link>
							</span>
						</template>
					</el-menu-item>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>功能管理</span>
					</template>
					
					<el-menu-item index="3-1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/miss">约会信息</router-link>
							</span>
						</template>
					</el-menu-item>
					<el-menu-item index="3-2">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/matching">匹配条件</router-link>
							</span>
						</template>
					</el-menu-item>
					<el-menu-item index="3-3">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/city">同城推荐</router-link>
							</span>
						</template>
					</el-menu-item>
					<el-menu-item index="3-4">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/news">消息接收</router-link>
							</span>
						</template>
					</el-menu-item>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>管理员管理</span>
					</template>
					<el-menu-item index="4-1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>
								<router-link to="/index/manager">管理员</router-link>
							</span>
						</template>
					</el-menu-item>
					<el-menu-item index="4-2">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>通知公告</span>
						</template>
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header>
				<Breadcrumb />
				    <router-view name="index"></router-view>
				<el-dropdown>
					<span class="el-dropdown-link">
						<el-avatar :size="30"
							src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>个人中心</el-dropdown-item>
						<el-dropdown-item>安全设置</el-dropdown-item>
						<el-dropdown-item >
							<router-link to="/">
								<span style="color: black;">退出登录</span>
							</router-link>
							</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb.vue";

	
	export default {
	  components: {
	    Breadcrumb,
	  },
	};

</script>

<style scoped>
	.el-header {
		background-color: #fefefe;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 0px 2px 2px #304156;
	}

	.el-aside {
		background-color: #304156;
		color: #333;
	}

	.el-menu {
		border: none;
	}

	.breadcrumb {
		display: flex;
	}

	.el-breadcrumb {
		margin-left: 25px;
	}

	#logo {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fefefe;
	}

	#logo img {
		width: 25px;
		height: 25px;

	}

	.el-container {
		height: 100vh;
	}
	
</style>